<template>
  <div class="vx-result">
    <div class="header">
      <img :src="require('@/assets/image/common/' + url + '.png')" alt class="img-title" v-if="url" />
      <img :src="require('@/assets/image/common/successGreen.png')" alt class="img-title" v-else-if="obj && obj.state === '00'" />
      <img :src="require('@/assets/image/common/error.png')" alt class="img-title" v-else-if="obj && obj.state === '01'" />
    </div>
    <p class="info" v-if="title">{{ title }}</p>
    <div class="details" v-if="obj && obj.serialNum">
      交易流水号： {{ obj.serialNum }}
      <slot name="detail">
        <div v-if="obj.list && obj.state === '00'">
          <span>此交易还需</span>
          <span v-for="(item, index) in obj.list" :key="index">
            <span>{{ item.num }}个{{ $msg('authLevelDict')[item.level] }}级审核员</span>
            <span v-if="index < obj.list.length - 2">、</span>
            <span v-else-if="index == obj.list.length - 2">和</span>
          </span>
          <span>进行审核<slot></slot></span>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vx-result',
  props: {
    title: {
      type: String,
    },
    resDetail: {
      type: Object,
    },
    url: {
      type: String,
      validate: function(url) {
        return ['successGreen', 'warning', 'error'].includes(url);
      },
    },
  },
  data() {
    return {
      obj: '',
    };
  },
  watch: {
    resDetail: {
      handler(val) {
        this.obj = val;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss">
.vx-result {
  height: 100%;
  text-align: center;
  margin-bottom: 20px;
  .header {
    margin-top: 40px;
    margin-bottom: 10px;
    .img-title {
      width: 72px;
      height: 72px;
    }
  }
  .info {
    font-size: 24px;
    font-weight: $font-weight-semibold;
    color: $color-text-main;
    line-height: 33px;
    margin-bottom: 10px;
  }
  .details {
    font-size: $s14;
    font-weight: $font-weight-normal;
    color: $color-text-normal;
    line-height: 20px;
    .details-info {
      color: $color-primary;
      cursor: pointer;
    }
  }
}
</style>
